<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <tree-tools :tree-node="company" is-root @addDept="addDept" @addDeptSuccess="getDepartments" />
        <el-tree :data="departs" :props="defaultProps" default-expand-all>
          <tree-tools slot-scope="{ data }" :tree-node="data" @delDept="getDepartments" @addDept="addDept" @editDept="editDept">
            <!-- <el-dropdown-item @click.native="addDept(data)">新增子部门</el-dropdown-item>
            <el-dropdown-item>编辑部门</el-dropdown-item>
            <el-dropdown-item @click.native="handleDel(data.id)">删除部门</el-dropdown-item> -->
          </tree-tools>
        </el-tree>
      </el-card>
    </div>
    <!-- :show-dialog="showDialog" @update:showDialog="showDialog = $event" -->
    <!-- <el-dialog title="新增部门" :visible="showDialog" @close="showDialog = false">
      <add-dept v-if="showDialog" />
    </el-dialog> -->
    <add-dept ref="addDept" :show-dialog.sync="showDialog" :tree-node="node" @addDeptSuccess="getDepartments" />
  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import { delDepartment, getDepartmentDetail, getDepartments } from '@/api/department.js'
import TreeTools from './components/tree-tools.vue'
import AddDept from './components/add-dept.vue'
import { tranListToTreeData } from '@/utils'
export default {
  name: 'Departments',
  components: {
    TreeTools,
    AddDept
  },
  props: {},
  data() {
    return {
      showDialog: false,
      company: { name: '江苏传智播客教育科技股份有限公司', manager: '负责人' },
      departs: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      node: {} // 当前操作部门
    }
  },
  created() {
    this.getDepartments()
  },
  mounted() {},
  methods: {
    addDept(node) {
      this.node = node
      this.showDialog = true
    },
    async editDept(node) {
      this.node = node
      this.showDialog = true
      // 方式1.把formData拿给父组件,通过prop传给子组件(不推荐)
      // 方式2.通过refs得到子组件,直接修改子组件的数据
      // this.$refs.addDept.formData = await getDepartmentDetail(node.id)
      // 方式3.通过refs得到子组件,调用子组件的方法,间接修改子组件的数据
      this.$refs.addDept.getDepartmentDetail(node
        .id)
    },
    handleDel(id) {
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async action => {
        console.log('删除')
        await delDepartment(id)
        // 通过elme
        this.$message({
          message: '删除成功',
          type: 'success',
          showClose: true,
          duration: 3000
        })
        this.getDepartments()
      }).catch(() => {

      })
    },
    async getDepartments() {
      const data = await getDepartments()
      console.log(data)
      this.company.name = data.companyName
      this.company.id = ''
      this.departs = tranListToTreeData(data.depts)
    }
  }
}
</script>

<style lang="scss" scoped>
.tree-card {
  padding: 30px  140px;
  font-size:14px;
}
</style>
